<template>
    <div class="com_box flexbox flexcolumn height_100">
        <ViewPlanGroup ref="groupRef"/>
        <ViewStraLog />
        <ViewStrategy ref="viewRef" />
        <ShieldGroup ref="shiefdRef" />
        <ViewShield ref="viewShield" />
        <div class="strategy_head sch_head flexbox flexcenter">
            <div class="has_check flexbox flexcenter flexbetween" v-if="hasStrategyData.length>0">
                <div class="has_ch_left">
                    <span class="has_text">已选中{{hasStrategyData.length}}项</span>
                    <span class="has_btn" @click="batchDeletStrategy">删除</span>
                </div>
                <div class="close_check" @click="closeHasStraCheck">
                    <img src="../../assets/img/close_check.svg" alt="">
                </div>
            </div>
            <template v-else>
                <div class="flexbox flexcenter flexbetween flex">
                    <div class="flexbox flexcenter">
                        <div class="sch_tab" @click="switchTab('/strategyuser')">广告防护</div>
                        <div class="sch_tab " @click="switchTab('/strategylist')">计划调控</div>
                        <div class="sch_tab" @click="switchTab('/strategyderive')">计划衍生</div>
                        <div class="sch_tab active" >预警提醒</div>
                        <!-- <span class="font_12" style="color: red; margin-left: 10px;">要托管的账号需要添加至"时段数据"--"数据看板"中</span> -->
                    </div>
                    <div class="flexbox flexcenter">
                        <!-- <div class="flexbox flexcenter flexcolumn flexjust shild_open" @click="openShilds">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                                <circle cx="10" cy="10.5" r="7" stroke="#616C85" stroke-width="1.6" />
                                <path d="M5 15.5C8.70998 11.79 11.29 9.20998 15 5.5" stroke="#616C85" stroke-width="1.6" />
                            </svg>
                            <div class="font_12 color_02 shields_text">屏蔽计划</div>
                        </div> -->
                        <el-input placeholder="名称(策略,广告组,账户)、ID(广告组,账户)" size="small" style="width:300px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                        </el-input>
                        <el-button type="primary" style="margin-left:12px" size="small" icon="el-icon-plus" @click="addStrategyModel()">添加策略</el-button>
                    </div>
                </div>
            </template>
        </div>
        <div class="ana_tips flexbox flexcenter">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3331 6.66673C13.3331 8.93596 11.9159 10.8742 9.91825 11.6446H7.99975H6.08125C4.08361 10.8742 2.66641 8.93596 2.66641 6.66673C2.66641 3.7212 5.05421 1.3334 7.99975 1.3334C10.9453 1.3334 13.3331 3.7212 13.3331 6.66673Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M9.91827 11.6445L9.6919 14.361C9.6775 14.5338 9.53307 14.6667 9.3597 14.6667H6.6398C6.46644 14.6667 6.322 14.5338 6.30764 14.361L6.08124 11.6445" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M5.60001 4.8V8L8.00001 6.4L10.4 8V4.8" stroke="white" stroke-width="1.12" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="font_14 color_01" style="margin-left:10px">为广告账户设置相应的策略条件，如符合策略条件的计划，系统将向预警人发送预算不足、计划闲置、消耗骤减等预警提醒信息，确保广告投放连续性和效率。</span>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%" :row-key="(row)=>{ return row.id}" @selection-change="selectStrategy" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="qc_delivery_monitoring_name" label="策略名称">
                </el-table-column>
                <!-- <el-table-column prop="ignore_num" label="屏蔽计划" width="150">
                    <template slot-scope="scope">
                        <div class="rule_num" @click="viewShildsGroup(scope.row.id)">{{scope.row.ignore_num}}</div>
                    </template>
                </el-table-column> -->
                <el-table-column prop="advertiser_num" label="广告账户/预警提醒人" width="200">
                    <template slot-scope="scope">
                        <div class="rule_num" @click="viewPlanGroup(scope.row.qc_delivery_monitoring_id)">{{scope.row.advertiser_num}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="策略状态" width="150">
                    <template slot="header" slot-scope="scope">
                        <div class="flexbox flexcenter">
                            策略状态
                            <el-popover placement="bottom" width="50" trigger="click" popper-class="strategy_pop">
                                <el-checkbox-group v-model="status" class="stra_status" @change="changeStatus">
                                    <el-checkbox label="">全部</el-checkbox>
                                    <el-checkbox label="1">启用</el-checkbox>
                                    <el-checkbox label="0">禁用</el-checkbox>
                                </el-checkbox-group>
                                <div slot="reference" class="rank_status" :class="{'active':queryInfo.status.length>0}">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="inherit" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.02806 3C2.61096 3 2.37722 3.48061 2.63474 3.80871L6.69332 8.97963C6.76243 9.06769 6.8 9.1764 6.8 9.28834V13.4085C6.8 13.5924 6.90096 13.7615 7.06286 13.8487L8.46286 14.6029C8.79598 14.7823 9.2 14.5411 9.2 14.1627V9.28834C9.2 9.1764 9.23757 9.06769 9.30668 8.97963L13.3653 3.80871C13.6228 3.48061 13.389 3 12.9719 3H3.02806Z" fill="inherit" />
                                    </svg>
                                </div>
                            </el-popover>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.qc_delivery_monitoring_status" :active-value="1" :inactive-value="0" @change="switchPlan(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" style="padding:0" @click="viewStrategy(scope.row)">预览</el-button>
                        <el-button type="text" style="padding:0" @click="editStategy(scope.row.qc_delivery_monitoring_id)">编辑</el-button>
                        <el-dropdown style="margin-left:5px">
                            <el-button type="text" style="padding:0" icon="el-icon-more" class="role_icon"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <!-- <el-dropdown-item @click.native="viewStraLog(scope.row)">
                                    <div class="flexbox flexcenter">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M11 17.9824L4.78571 17.9825C4.35178 17.9825 4 17.603 4 17.1349L4 3.8474C4 3.37926 4.35178 2.99978 4.78572 2.99978L15.2143 2.99978C15.6482 2.99978 16 3.37926 16 3.84741L16 10.9999" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7 7H13" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M7 10H10.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M12 14.5L14 13L16 14.5" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M14 18L14 13" stroke="#616C85" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <span class="font_14 color_01" style="margin-left:5px">日志</span>
                                    </div>
                                </el-dropdown-item> -->
                                <el-dropdown-item @click.native="deletStrategy(scope.row.qc_delivery_monitoring_id)">
                                    <div class="flexbox flexcenter">
                                        <img src="../../assets/img/del_icon.svg" alt="">
                                        <span class="font_14 color_01" style="margin-left:5px">删除策略</span>
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
        <PreviewDialog ref="PreviewDialog" :showData="previewData"  v-if="displayDialog"/>
    </div>
</template>

<script>
import ViewPlanGroup from "@/components/delivery/components/GroupDialog";
import ViewStraLog from "./ViewStraLog";
import ViewStrategy from "./ViewStrategy";
import ShieldGroup from "./ShieldGroup";
import ViewShield from "./ViewShield";

import PreviewDialog from "@/components/delivery/components/PreviewDialog";
export default {
    components: {
        ViewPlanGroup,
        ViewStraLog,
        ViewStrategy,
        ShieldGroup,
        ViewShield,
        PreviewDialog
    },
    name: "",
    data() {
        return {
            displayDialog:false,
            loading: false,
            hasStrategyData: [],
            status: [],
            queryInfo: {
                query: "",
                page: 1,
                limit: 20,
                status: [],
            },
            total: 0,
            setpage: 1,
            tableData: [],
            previewData:[]
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "autodrop/Monitoring/templateList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 添加模板
        addModel() {
            this.$router.push({
                path: "/addstrategy",
            });
        },

        // 添加模板
        addStrategyModel() {
            this.$router.push({
                path: "/AddWarnmodel",
            });
        },

        editStategy(id) {
            this.$router.push({
                path: "/AddWarnmodel",
                query: {
                    template_id: id,
                },
            });
        },

        // 屏蔽计划
        openShilds(){
            this.$refs.shiefdRef.getData()
        },

        // 日志
        viewStraLog(row) {
            const attr = {
                dialogVsb: true,
                template_id: row.id,
                name: row.name,
            };
            this.$bus.emit("viewStraLog", attr);
        },

        // 删除模板
        deletStrategy(id) {
            this.$confirm("是否要删除该模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "autodrop/Monitoring/templateDelete",
                        {
                            qc_delivery_monitoring_id: [id],
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },

        // 批量删除模板
        batchDeletStrategy() {
            this.$confirm("是否要删除已选中模板?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "autodrop/Monitoring/templateDelete",
                        {
                            qc_delivery_monitoring_id: this.hasStrategyData,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getDataList(this.setpage);
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.closeHasStraCheck();
                    }
                })
                .catch(() => {});
        },

        switchPlan(row) {
            let text = row.qc_delivery_monitoring_status == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}策略`, `${text}策略`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.qc_delivery_monitoring_status == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        "autodrop/Monitoring/templateSwitch",
                        {
                            qc_delivery_monitoring_id: row.qc_delivery_monitoring_id,
                            qc_delivery_monitoring_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        changeStatus(v) {
            let arr = v.filter(Boolean);
            this.queryInfo.status = arr;
            this.getDataList(1);
        },

        // 批量选择
        selectStrategy(val) {
            var ids = [];
            val.forEach((element) => {
                ids.push(element.qc_delivery_monitoring_id);
            });
            this.hasStrategyData = ids;
        },

        // 关闭批量选择
        closeHasStraCheck() {
            this.hasStrategyData = [];
            this.$refs.straRef.clearSelection();
        },

        // 查看关联广告组
        viewPlanGroup(id) {
            this.$refs.groupRef.dialogVisible = true;
            this.$refs.groupRef.queryInfo.qc_delivery_monitoring_id = id;
            this.$refs.groupRef.getDataList();
        },

        // 查看已屏蔽的计划
        viewShildsGroup(id){
            this.$refs.viewShield.getData(id);
        },

        // 预览
        async viewStrategy(row) {
            
            const { data: res } = await this.$http.post(
                "autodrop/Monitoring/templateFind",
                {
                    qc_delivery_monitoring_id: row.qc_delivery_monitoring_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                res.data.advertiser_list.forEach(item=>{
                    item.qc_delivery_monitoring_marketing_goal_type = item.qc_delivery_monitoring_marketing_goal_type == '2'?['0','1']:[item.qc_delivery_monitoring_marketing_goal_type+''];
                    item.qc_delivery_monitoring_userid = item.qc_delivery_monitoring_userid.map(e=>e.id);
                })
                this.previewData = res.data;
                this.displayDialog = true;
                this.$nextTick(() => {
                    this.$refs.PreviewDialog.dialogVisible = true;
                    console.log(this.previewData,this.$refs.PreviewDialog)
                })
            }
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
};
</script>


<style scoped>
.strategy_head {
    margin-bottom: 20px;
}
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.time_rank {
    margin-top: 20px;
}

.table_box {
    padding: 0 20px;
}
.time_model {
    padding: 8px;
}
.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}
.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}
.ana_tips {
    height: 32px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 4px;
    padding: 0 20px;
    margin: 0 20px 20px;
}
.shild_open{
    margin-right: 12px;
    cursor: pointer;
}
.shields_text{
    line-height: 17px;
}
</style>

<style>
.user_select .el-input__suffix .el-icon-arrow-up:before {
    content: "";
    color: #17233d;
}
.rank_status {
    fill: #95a5c9;
}
.rank_status.active {
    fill: #4475ff;
}
.stra_status .el-checkbox {
    display: block;
    margin-right: 0;
    padding: 5px;
}
.strategy_pop {
    min-width: 80px !important;
}
.role_icon {
    transform: rotate(-90deg);
}
</style>

